<template>
  <div id="mapContainer"></div>
  <popWindows
    @closeWindow="closeWindow(true)"
    :data="propsData.areaData"
    ref="boxcontent"
    v-if="showFlag"
  />
  <popWindows2
    @closeWindow="closeWindow"
    :data="propsData.pointData"
    ref="boxcontent2"
    v-if="showFlag"
  />
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  onMounted,
  onUnmounted,
  toRefs,
} from "vue";
import Setting from "@/public/config"
import {  get } from "@/public/request/api";
import MapInit from "@/components/mapContainer/mapInit.js";
import popWindows from "@/components/popWindows/windows-1.vue";
import popWindows2 from "@/components/popWindows/windows-2.vue";
import { getCenter } from "@/components/_util/util";
import { ElMessage } from 'element-plus'
import storage from '@/store'
import moment from "moment";
var polygon = null;
export default defineComponent({
  components: {
    popWindows,
    popWindows2,
  },
  props: {
    data: Array,
    deviceArr: Array,
  },
  setup(props, { emit }) {
    let showFlag = ref(false);
    const state = reactive(props);
    const { data, deviceArr } = toRefs(state);
    const flag = ref(false);
    const boxcontent = ref<any>(null);
    const boxcontent2 = ref<any>(null);
    let propsData = reactive({
      areaData: {},
      pointData: {
            name:'' ,
            type:'',
            diyName:'' ,
            lon:'' ,
            lat: '',
            manufacturers:'',
            deviceStatus:'',
            plotName:'',
            serialNumber:'',
            address:'',
            ptype:'',
            fs:'',
            sd:'',
            wd:'',
            fushe:'',
            gz   :'',
            jyl  :'',
            ec10  :'', 
            ec20 :'',  
            ec30  :'', 
            tw10  :'', 
            tw20  :'', 
            tw30  :'', 
            ts10  :'', 
            ts20  :'', 
            ts30  :'',
            buildTime:'',
            token:'',
            url:'',
            zgjkyl:'',
            fyljll1:'',
            fyljll2:'',
            gdbdy:'',
            gdbdl:'',
            gdbzt:'',
            cqpic:'',
            
      },
    });
    const etuokeJson = require("@/assets/json/etuokeqianBanner.json");
    const txtMenuItem = ref([
      {
        text: "放大",
        callback: function () {
          map.zoomIn();
        },
      },
      {
        text: "缩小",
        callback: function () {
          map.zoomOut();
        },
      },
      {
        text: "放置到最大级",
        callback: function () {
          map.setZoom(18);
        },
      },
      {
        text: "查看全国",
        callback: function () {
          map.setZoom(4);
        },
      },
      {
        text: "获得右键点击处坐标",
        isDisable: false,
        callback: function (lnglat) {
          console.log(lnglat.getLng() + "," + lnglat.getLat());
        },
      },
    ]);

    const pointArr = ref([
      {
        name: "一号摄像头",
        type: 1,
        lat: [107.51127, 38.20215],
      },
      {
        name: "二号摄像头",
        type: 1,
        lat: [107.52127, 38.21156],
      },
      {
        name: "一号虫情仪",
        type: 2,
        lat: [107.46711, 38.21759],
      },
      {
        name: "二号虫情仪",
        type: 2,
        lat: [107.47301, 38.21759],
      },
    ]);
    let map = null;
    let zoom = 15;
    let layL = null;
    let layT = null;
    let layDiy=null
    let T = null;
    let allHq=reactive({
      value: [],
    });
    let infoWin1 = reactive(null);
    let allPolygon = reactive({
      value: [],
    });
    let allSet=reactive({
      value:[]
    })
    const rk=storage.state.userInfo.rk
    let allSet2=reactive({
        value:[]
    })
    let allRoad=reactive({
      value:[]
    })
    let allWaterRoad=reactive({
      value:[]
    })
    let handlepopup=null
    // 生命周期
    onMounted(() => {
      // init();
    });
    onUnmounted(() => {
      //
    });

    // methods
    function closeWindow(type=null) {
      //polygon.closeInfoWindow
      console.log(123);
      console.log(11111,infoWin1);
      handlepopup.closeInfoWindow(infoWin1)
      if(type){
        emit('closeplotpanpel')
      }
      // if (infoWin1) {
      //   console.log(456);
        
      //   map.removeOverLay(infoWin1);
      //   //infoWin1 = null;
      // }
    }
    //初始化地图
    const init = () => {
      MapInit.init().then((res) => {
        T = res;
        let imageURL =
          "http://t0.tianditu.gov.cn/img_w/wmts?" +
          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=729cb66926dcefcee8742ff04c4bf35a";
        let imageURT =
          "http://t0.tianditu.gov.cn/cia_w/wmts?" +
          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=729cb66926dcefcee8742ff04c4bf35a";
        let diyURT = "http://139.9.231.9:10015/geoserver/gwc/service/wmts?layer=eqq-1:result&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetCapabilities&Version=1.0.0&Format=image/png&&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
          
          
        
          //创建自定义图层对象

        layDiy = new T.TileLayer(diyURT, { minZoom: 5, maxZoom: 18 }); 
        layL = new T.TileLayer(imageURL, { minZoom: 5, maxZoom: 18 });
        layT = new T.TileLayer(imageURT, { minZoom: 5, maxZoom: 18 });
        let config = { layers: [layL, layT] };
        //初始化地图对象
        map = new T.Map("mapContainer", config);
        let LngLat = etuokeJson.features[0].properties.center;
        //设置显示地图的中心点和级别
        // map.centerAndZoom(new T.LngLat(108.406082, 37.701533), zoom);
        //允许鼠标滚轮缩放地图
        map.enableScrollWheelZoom();
        map.addEventListener("click",(e)=>{
          console.log('地图点击经纬度：',e.lnglat)
        });
        if(data.value.length>0){
           drawLine();
            addMenu();
            drawPolygon();
            drawSet()
            addLabel();
        }else{
          map.centerAndZoom(new T.LngLat(107.55855,38.20601),9);
          ElMessage({
            message: "暂无地块信息",
            //type: "success",
          });
        }
       

        initMapSet()
        showFlag.value = true;
      });
    };
    function drawSet(filterSet=null){
      
      allSet.value.forEach((item) => {
        map.removeOverLay(item)
      });
      allSet.value=[]
      if(!filterSet){
        deviceArr.value.forEach((item) => {
         
          drawPoint(item);
        });
      }else{
        let typeSet=999999
        if(filterSet=='all'){
          deviceArr.value.forEach((item) => {
           
            drawPoint(item);
          });
        }else{
          if(filterSet=='met'){
            typeSet=1
          }else if(filterSet=='mois'){
            typeSet=2
          }else if(filterSet=='water'){
            typeSet=3
          }else if(filterSet=='cam'){
            typeSet=4
          }else if(filterSet=='insect'){
            typeSet=5
          }else if(filterSet=='grow'){
            typeSet=6
          }else if(filterSet=='spore'){
            typeSet=7
          }
          deviceArr.value.forEach((item) => {
           
            if(item['type']==typeSet){
              drawPoint(item);
              console.log('过滤画设备',item)
            }
            
          });
        }
      }
      
    }
     function initMapSet(type=null) {
      console.log('type',type)
      get("/plot/getMapInfrastructures", {
          
      }).then((res) => {
        
        allSet2.value.forEach((item) => {
          map.removeOverLay(item)
        });
        allSet2.value=[]
        
        allRoad.value.forEach(item=>{
          map.removeOverLay(item);
        })
        allRoad.value=[]

        allWaterRoad.value.forEach(item=>{
          map.removeOverLay(item);
        })
        allWaterRoad.value=[]

        let simple=res.data.simpleInfrastructureInfoList
        let road=res.data.masterRouters
        let waterRoad2=res.data.waterMasterRouters
        
        if(type==null){
          simple.forEach((item,index)=>{
            let itemset={
              type:item.infrastructureType-1,
              name:item.infrastructureName,
              lat:[item.lon,item.lat],
              plotName:item.plotName,
              address:item.address,
              buildTime:item.buildTime
            }
            drawPoint2(itemset)
          })
          
          waterRoad2.forEach((item,index)=>{
            drawWaterRoad(item.branchRouters,1)
          })
          road.forEach((item,index)=>{
            drawWaterRoad(item.branchRouters)
          })
          
        }else if(type==1){
         
          road.forEach((item,index)=>{
            drawWaterRoad(item.branchRouters)
          })
        }else if(type==2){
          //画水网
          
          waterRoad2.forEach((item,index)=>{
            drawWaterRoad(item.branchRouters,1)
          })
        }else{
          simple.forEach((item,index)=>{
            if(item.infrastructureType==type-1){
              let itemset={
                type:item.infrastructureType-1,
                name:item.infrastructureName,
                lat:[item.lon,item.lat],
                plotName:item.plotName,
                address:item.address,
                buildTime:item.buildTime
              }
              drawPoint2(itemset)
            }
            
          })
        }
      })
    }
    function drawWaterRoad(arr,type=0) {
     
      let color=type==0?'#DCE6F5':'#31C1F5'
      arr.forEach((item,index)=>{
        let points = item.inodeList.map((item1) => {
          return new T.LngLat(item1.lon, item1.lat);
        });
        let line = new T.Polyline(points, {
          weight: 4,
          //fillColor:'#F5DB31',
          color,
          opacity: 1,
          //lineStyle: "dashed",
        });
        //向地图上添加线
        map.addOverLay(line);
        if(type==0){
           allRoad.value.push(line)
        }else{
          allWaterRoad.value.push(line)
        }
      })
    }

    function setMapCenter(arr) {
      let newArr = [];
      arr.forEach((item) => {
        newArr.push({
          lon: item[0],
          lat: item[1],
        });
      });
      let center = getCenter(newArr);
      
      map.centerAndZoom(new T.LngLat(center["lng"], center["lat"]), zoom);
    }
    function haveCenter(arr) {
      let newArr = [];
      arr.forEach((item) => {
        newArr.push({
          lon: item[0],
          lat: item[1],
        });
      });
      let center = getCenter(newArr);
      return [center["lng"], center["lat"]]
      
    }
    function drawPolygon() {
      if(data.value.length>0){
        let get= sessionStorage.getItem('nowBaseId')
        if(rk=='admin-gov'&&!get){
          map.centerAndZoom(new T.LngLat(107.55855,38.20601),9);
          
        }else{
          setMapCenter(data.value[0]["points"]);
        }
      }
      allHq.value.forEach((item) => {
        map.removeOverLay(item)
      });
      allPolygon.value.forEach((item) => {
        item.onRemove();
      });
      data.value.forEach((item) => {
        drawArea(item);
      });
    }
    const addLabel = () => {
      let latlng = new T.LngLat(107.48127, 38.18156);
      let addHtml = `<div class="dkdiv">
                      <div class='picicon'>
                      </div> 
                      <div class='rightt'>
                        <div class='name'>
                          地块组01
                        </div>
                        <div class='rightt2'>
                         
                            耕地面积:
                          
                          <div class='bold'>
                            25456
                          </div>  
                          亩
                        </div>
                      </div>
                  </div>`;
      let label = new T.Label({
        text: addHtml,
        position: latlng,
        offset: new T.Point(-9, 0),
      });
      //创建地图文本对象
      //map.addOverLay(label);
    };
    //添加右键菜单
    const addMenu = () => {
      let menu = new T.ContextMenu({ width: 140 });
      for (var i = 0; i < txtMenuItem.value.length; i++) {
        //添加菜单项
        var item = new T.MenuItem(
          txtMenuItem.value[i].text,
          txtMenuItem.value[i].callback
        );
        menu.addItem(item);
        if (i == 1 || i == 3) {
          //添加分割线
          menu.addSeparator();
        }
      }
      map.addContextMenu(menu);
    };
    //打点
   
    const drawPoint2 = (item) => {
      let icon = [
        require("../../assets/img/i13.png"),
        require("../../assets/img/i11.png"),
        require("../../assets/img/i6.png"),
        require("../../assets/img/i8.png"),
        require("../../assets/img/i10.png"),
        require("../../assets/img/i12.png"),
      ];
      
      let name = ["泵房/井房", "水池", "仓库", "入水口", "出水口",'阀控器'];
      let marker = new T.Marker(new T.LngLat(item.lat[0], item.lat[1]), {
        icon: new T.Icon({ iconUrl: icon[item.type - 1],
        iconAnchor: new T.Point(14,0)
        }),
      });
      marker.addEventListener("click", () => {
        infoWin1 = new T.InfoWindow(boxcontent2.value.$refs.popW, {
          minWidth: 300,
          closeOnClick: false,
        });
        marker.openInfoWindow(infoWin1);
        handlepopup=marker
        propsData.pointData = {
          name: name[item.type - 1],
          type: item.type,
          diyName: item.name,
          lon: item.lat[0],
          lat: item.lat[1],
          plotName:item.plotName,
          address:item.address,
          buildTime:item.buildTime,
          ptype:'set2',
          fs:'',
            sd:'',
            wd:'',
            fushe:'',
            gz   :'',
            jyl  :'',
            ec10  :'', 
            ec20 :'',  
            ec30  :'', 
            tw10  :'', 
            tw20  :'', 
            tw30  :'', 
            ts10  :'', 
            ts20  :'', 
            ts30  :'',
            manufacturers:'',
            deviceStatus:'',
            serialNumber:'',
            token:'',
            url:'',
            zgjkyl:'',
            fyljll1:'',
            fyljll2:'',
            gdbdy:'',
            gdbdl:'',
            gdbzt:'',
            cqpic:'',
        };
      });
      map.addOverLay(marker); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
      marker.disableDragging(); //关闭标注拖拽功能,这里不关闭，标点就可以随便拖动
      allSet2.value.push(marker)
    };
    const drawPoint = (item) => {
      let icon = [
        require("../../assets/img/i5.png"),
        require("../../assets/img/i7.png"),
        require("../../assets/img/i9.png"),
        require("../../assets/img/i1.png"),
        require("../../assets/img/i3.png"),
        require("../../assets/img/zsicon.png"),
        require("../../assets/img/bzicon.png"),
      ];
      // met:require("../../assets/img/icon3.png"),
      // mois:require("../../assets/img/icon2.png"),
      // water:require("../../assets/img/icon4.png"),
      // cam:require("../../assets/img/icon1.png"),
      // insect:require("../../assets/img/icon3.png")
      let name = ["气象设备", "墒情设备", "水肥机", "摄像头", "虫情设备",'长势监测仪','孢子仪'];
      let marker = new T.Marker(new T.LngLat(item.lat[0], item.lat[1]), {
        icon: new T.Icon({ iconUrl: icon[item.type - 1],
          iconAnchor: new T.Point(14,0)
        }),
      });
      marker.addEventListener("click", () => {
        console.log('eeeeeeee',item);
        propsData.pointData = {
            name: name[item.type - 1],
            type: item.type,
            diyName: item.name,
            lon: item.lat[0],
            lat: item.lat[1],
            manufacturers:item.manufacturers,
            deviceStatus:item.deviceStatus,
            plotName:item.plotName,
            serialNumber:item.serialNumber,
            address:item.address,
            ptype:'set1',
            fs:'',
            sd:'',
            wd:'',
            fushe:'',
            gz   :'',
            jyl  :'',
            ec10  :'', 
            ec20 :'',  
            ec30  :'', 
            tw10  :'', 
            tw20  :'', 
            tw30  :'', 
            ts10  :'', 
            ts20  :'', 
            ts30  :'',
            buildTime:'',
            token:'',
            url:'',
            zgjkyl:'',
            fyljll1:'',
            fyljll2:'',
            gdbdy:'',
            gdbdl:'',
            gdbzt:'',
            cqpic:'',
            
        };
        if(item.type=='5'||item.type=='7'){
          get("/device/monitor", {
            id:item.deviceId,
            pageNum:1,
            pageSize:1,
          }).then((res) => {
            if(res.pageInfo.list.length>0){
              // let urlbase=Setting.HttpApiAddress
              let urlbase='https://iqq.etkqq.gov.cn/api-app'
              propsData.pointData.cqpic=urlbase+res.pageInfo.list[0]['url']
            }else{
              propsData.pointData.cqpic=''
            }
            
          })
        }
       
        if(item.type=='3'){
          get("/device/getCollectInfo", {
            id:item.deviceId,
          }).then((res) => {
            let get=res.data.data
            //主管进口压力 
            propsData.pointData.zgjkyl=get[1]['value']
            //肥液累计流量1
            propsData.pointData.fyljll1=get[2]['value']
            //肥液累计流量2
            propsData.pointData.fyljll2=get[3]['value']
            //管道泵电压
            propsData.pointData.gdbdy=get[4]['value']
             //管道泵电流
            propsData.pointData.gdbdl=get[5]['value']
             //管道泵状态
            propsData.pointData.gdbzt=get[9]['value']
          })
        }
        if(item.type=='1'){
          get("/device/getCollectInfo", {
            id:item.deviceId,
          }).then((res) => {
            let get=res.data.data
            propsData.pointData.fs=get[0]['value']
            propsData.pointData.sd=get[3]['value']
            propsData.pointData.wd=get[2]['value']
            propsData.pointData.fushe=get[5]['value']
            propsData.pointData.gz=get[6]['value']
            propsData.pointData.jyl=get[4]['value']
            
          })
        }
        if(item.type=='4'){
          get("/device/getCollectInfo", {
            id:item.deviceId,
          }).then((res) => {
            console.log(res);
            
            // propsData.pointData.token=res.data.token
            // propsData.pointData.url=res.data.url
            console.log('boxcontent2',boxcontent2)
            //setTimeout(() => {
              // boxcontent2.value.initVideo()  
              boxcontent2.value.play(res.data.url)  
            //}, 1000);
            
          })
        }  
        if(item.type=='2'){
          get("/device/getCollectInfo", {
            id:item.deviceId,
          }).then((res) => {
            let get=res.data.data.Level
            propsData.pointData.ec10=get[0]['EC']
            propsData.pointData.ec20=get[1]['EC']
            propsData.pointData.ec30=get[2]['EC']
            propsData.pointData.tw10=get[0]['Humidity']
            propsData.pointData.tw20=get[1]['Humidity']
            propsData.pointData.tw30=get[2]['Humidity']
            propsData.pointData.ts10=get[0]['Temp']
            propsData.pointData.ts20=get[1]['Temp']
            propsData.pointData.ts30=get[2]['Temp']
            
          })
        }
        
        infoWin1 = new T.InfoWindow(boxcontent2.value.$refs.popW, {
          minWidth:item.type=='4'?600:300,
          closeOnClick: false,
        });
        marker.openInfoWindow(infoWin1);
        handlepopup=marker
        
      });
      map.addOverLay(marker); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
      marker.disableDragging(); //关闭标注拖拽功能,这里不关闭，标点就可以随便拖动
      allSet.value.push(marker)
    };
    //添加地图多边形覆盖
    const drawArea = (data) => {
      let points = [];
      data.points.forEach((item) => {
        points.push(new T.LngLat(item[0], item[1]));
      });
      //创建面对象
      
      let polygon = new T.Polygon(points, {
        data: data,
        color: data.color,
        weight: 3,
        opacity: 1,
        fillColor: data.fillColor,
        fillOpacity: 1,
      });

      //向地图上添加面
      polygon.addEventListener("click", () => {
        infoWin1 = new T.InfoWindow(boxcontent.value.$refs.popW, {
          minWidth: 320,
          maxWidth: 320,
          maxHeight: 300,
          closeOnClick: false,
        });
        console.log('鼠标移入地块',data);
        if(deviceArr.value&&deviceArr.value.length>0){
          let findMois=deviceArr.value.find(item=>{
            return item['plotId']==data.plotId&&item['type']==2
          })
          if(findMois){
            get("/device/getCollectInfo", {
              id:findMois['deviceId']
            }).then((res) => {
              if(res.code==200){
                data.solidLevel=res.data.data.Level
              }else{
                data.solidLevel=null
              }
            });
          }else{
            data.solidLevel=null
          }
        }
        propsData.areaData = data;
        polygon.openInfoWindow(infoWin1);
        handlepopup=polygon
        emit("openPlotInfo", data.plotId);
      });
      // polygon.addEventListener("mouseout", () => {
      //   console.log('鼠标移出地块');
      //   polygon.closeInfoWindow();
      // });
      if(data.sign==1){
        
        if(data.points&&data.points.length>0){
          let get=haveCenter(data.points)
          
          
          let iconset= require("../../assets/img/hq.png")
          let marker2 = new T.Marker(new T.LngLat(get[0], get[1]), {
            icon: new T.Icon({ iconUrl: iconset,
              iconAnchor: new T.Point(6,0)
            }),
          });
          map.addOverLay(marker2); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
          marker2.disableDragging(); //关闭标注拖拽功能,这里不关闭，标点就可以随便拖动
          allHq.value.push(marker2)
        }
       
      }
      if (data.inPoints) {
        let points = [];
        JSON.parse(data.inPoints).forEach((item) => {
          points.push(new T.LngLat(item["lng"], item["lat"]));
        });
        let polygonSc = new T.Polygon(points, {
          color: "red",
          weight: 1,
          opacity: 0.5,
          fillColor: "red",
          fillOpacity: 0.5,
        });
        map.addOverLay(polygonSc);
        allPolygon.value.push(polygonSc);
      }
      map.addOverLay(polygon);
      allPolygon.value.push(polygon);
    };

    //覆盖物点击事件
    const polygonClick = (e) => {
      console.log(e);
    };

    //行政区划描边
    const drawLine = () => {
      let lines = etuokeJson.features[0].geometry.coordinates;
      let points = [];
      let style = {
        color: "red",
        weight: 4,
        opacity: 1,
        //lineStyle: "dashed",
        fillColor: "transprent",
        fillOpacity: 0,
      };
      lines.forEach((line) => {
        var point = new T.LngLat(line[0], line[1]);
        points.push(point);
      });
      var poly = new T.Polygon(points, style);
      map.addOverLay(poly);
    };

    return {
      allSet2,
      initMapSet,
      drawWaterRoad,
      drawPolygon,
      showFlag,
      init,
      addLabel,
      boxcontent2,
      boxcontent,
      drawArea,
      flag,
      propsData,
      closeWindow,
      pointArr,
      drawPoint,
      drawPoint2,
      drawSet,
    };
  },
});
</script>

<style lang="scss">
@import "@/assets/scss/index.scss";
.tdt-label {
  background: transparent;
  border: none;
  padding: 0;
}
.tdt-infowindow-scrolled {
  height: auto !important;
  border: none !important;
  width: 600px !important;
}
.dkdiv {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  padding: 5px;
  .rightt2 {
    color: #ccc;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
  .rightt {
  }
  .bold {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    margin: 0 5px;
  }
  .picicon {
    width: 48px;
    height: 48px;
    background: url("../../assets/img/dikuai.png");
    background-size: 100% 100%;
    margin-right: 10px;
  }
}
#mapContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#mapContainer2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.tdt-infowindow-content-wrapper {
  // min-width: 320px;
  // min-height: 200px;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  opacity: 1;

  border-radius: 10px;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.tdt-container a.tdt-infowindow-close-button {
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  font: 24px/24px Tahoma, Verdana, sans-serif;
  color: #fff;
}
</style>
